<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        margin-top: 5px;
        line-height: 30px;
    }
    .container {
        height: 400px;
        width: 500px;
        margin: 0 auto;
    }
</style>
<body>
    <div class="container">
        <span><input type="button" class="button" value="重新开始一局游戏"></span><br/>
        <span><label for="number">请输入要猜的数字：</label><input type="text" name="number" id="number"></span>
        <span><input type="button" class="Guess" value="猜"></span><br/>
        已经猜的次数：<span class="account">0</span><br/>
        结果：<span class="result"></span><br/>
    </div>
</body>
<script>
    let GuessNum = Math.floor(Math.random() * 100) + 1;//1到100之间的数字
    let Account = 0;//已经猜想的次数

    let button = document.querySelector('.button');
    let number = document.querySelector('#number');
    let account = document.querySelector('.account');
    let result = document.querySelector('.result');
    let Guess = document.querySelector('.Guess');
    Guess.onclick = function()
    {
        count++;
        account.innerText = count;
        let Num = parseInt(number.value);
        if(GuessNum > Num)
        {
            result.innerText = "猜小了";
            result.style = "color: red";
        }
        else if(GuessNum < Num)
        {
            result.innerText = "猜大了";
            result.style = "color: red";
        }
        else
        {
            result.innerText = "猜对了";
            result.style = "color: green";
        }
    }
    button.onclick = function()
    {
        GuessNum = Math.floor(Math.random() * 100) + 1;//重新给要猜想的数字
        count = 0;
        number.value = "";
        account.innerText = count;
        result.innerText = "";
    }
</script>
</html>